<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="auto"
				class="flex-warp-container"
			>
				<el-form-item
					label="所属商户:"
					class="flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						placeholder="默认选择全部"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.channel_name')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.channelName"
						clearable
						size="medium"
						style="width: 300px"
						:placeholder="$t('common.please_enter')"
						@blur="cleanBlankSpace('queryData', 'channelName')"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.pay_type')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.payType"
						style="width: 180px"
						:popper-append-to-body="false"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							v-for="item in payTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				:max-height="tableHeight"
				highlight-current-row
				style="width: 100%"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="index"
					align="center"
					:label="$t('common.serial_number')"
					:width="getWidth(50, 1.3)"
				>
					<template slot-scope="scope">
						{{ pageSize * (pageNum - 1) + scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					prop="channelName"
					align="center"
					:label="`${$t('funds.channel_name')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.channelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="status"
					align="center"
					:label="
						`${$t(
							'funds.thirdPeymentChannelConfig.channel_status'
						)}`
					"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 1" type="success">
							{{ $t('funds.enable') }}
						</el-tag>
						<el-tag v-else type="danger">
							{{ $t('funds.disable') }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="payName"
					align="center"
					:label="`${$t('funds.pay_type')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.payName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="scale"
					align="center"
					:label="`${$t('funds.deposit_and_withdraw_config.scale')}`"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.scale || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="weight"
					align="center"
					:label="`${$t('funds.deposit_and_withdraw_config.weight')}`"
					show-overflow-tooltip
				>
					<!-- <template slot="header" slot-scope="scope">
							<el-popover
								placement="top-start"
								:title="
									$t('funds.deposit_and_withdraw_config.tip')
								"
								width="280"
								trigger="hover"
							>
								<div v-if="!scope.row">
									<p>
										{{
											$t(
												'funds.deposit_and_withdraw_config.weight_tip'
											)
										}}
									</p>
								</div>
								<div slot="reference" class="el-icon-question">
									<span class="other-class">
										{{
											$t(
												'funds.deposit_and_withdraw_config.weight'
											)
										}}
									</span>
								</div>
							</el-popover>
						</template> -->
					<template slot-scope="scope">
						{{ scope.row.weight | filterDecimalsN(2) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="status"
					align="center"
					label="状态开关"
					:width="150"
				>
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							:disabled="!hasPermission('403022')"
							:active-text="$t('funds.enable')"
							:inactive-text="$t('funds.disable')"
							:active-value="1"
							:inactive-value="0"
							@change="useChannel(scope.row)"
						/>
					</template>
				</el-table-column>

				<el-table-column
					prop="operator"
					align="center"
					:label="$t('common.last_updateBy')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.operator || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					:label="$t('common.last_updateAt')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.updatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="auditStep"
					align="center"
					:label="$t('common.actions')"
					width="180"
					fixed="right"
				>
					<template slot-scope="scope">
						<el-button
							v-if="hasPermission('403021')"
							type="primary"
							size="medium"
							@click="openEditDialog(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
						<el-button
							v-if="
								scope.row.status === 0 &&
									hasPermission('403022')
							"
							slot="reference"
							size="small"
							link
							type="success"
							@click="useChannel(scope.row, 1)"
						>
							{{ $t('funds.enable') }}
						</el-button>
						<el-button
							v-if="
								scope.row.status === 1 &&
									hasPermission('403022')
							"
							slot="reference"
							size="small"
							link
							type="danger"
							@click="disableChannel(scope.row)"
						>
							{{ $t('funds.disable') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:visible.sync="visibleDialog"
			:title="
				formData.channelName +
					$t('funds.deposit_and_withdraw_config.modify')
			"
			width="500px"
		>
			<el-form
				ref="dialogFormRef"
				:model="formData"
				:rules="editFormRules"
				label-width="auto"
				:close-on-click-modal="false"
			>
				<el-form-item
					:label="`${$t('funds.deposit_and_withdraw_config.scale')}:`"
					prop="scale"
				>
					<el-input
						v-model="formData.scale"
						:placeholder="
							$t(
								'funds.deposit_and_withdraw_config.scale_placeholder'
							)
						"
						maxlength="5"
						style="width: 280px"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.deposit_and_withdraw_config.status')}:`
					"
					prop="status"
				>
					<el-switch
						v-model="formData.status"
						:active-text="$t('funds.enable')"
						:inactive-text="$t('funds.disable')"
						:active-value="1"
						:inactive-value="0"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="visibleDialog = false">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="primary" @click="handleSubmit">
						{{ $t('common.confirm') }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.memberWithdrawChannelConfig,
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		this.loadData = this.throttle(this.loadData, 1000)
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				pageNum: 1,
				pageSize: 100,
				paymentMerchantType: 2,
				merchantId: null,
				userType: 0
			},
			type: true,
			formData: {},
			dataList: [],
			visibleDialog: false,

			editFormRules: {
				scale: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.scale_placeholder'
						),
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(
									new Error(
										this.$t(
											'funds.deposit_and_withdraw_config.form_rules_tip4'
										)
									)
								)
							} else if (
								isNaN(value) ||
								(value + '').includes('.')
							) {
								callback(
									new Error(
										this.$t(
											'funds.deposit_and_withdraw_config.form_rules_tip1'
										)
									)
								)
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}
				],
				status: [
					{
						required: true,
						message: this.$t(
							'funds.deposit_and_withdraw_config.form_rules_tip6'
						),
						trigger: 'blur'
					}
				]
			}
		}
	},
	computed: {
		payTypeList() {
			return this.globalDics.withdrawMemberPaymentType || []
		}
	},
	mounted() {
		// this.loadData()
		this.queryData.merchantId = this.$store.getters.userInfo.merchantId
		if (this.queryData.merchantId === '0') {
			this.queryData.merchantId = null
		}
	},
	methods: {
		cleanBlankSpace(key, key1) {
			if (this[key][key1]) {
				this[key][key1] = (this[key][key1] + '').replace(/\s+/g, '')
			}
		},
		loadData() {
			// if (!this.queryData.merchantId) {
			// 	this.dataList = []
			// 	return
			// }
			this.loading = true
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params),
				userType: 0
			}
			this.$api
				.getPaymentChannelConfigMemberDeposit(params)
				.then((res) => {
					this.loading = false
					const {
						code,
						data: { record, totalRecord },
						msg
					} = res
					if (code === 200) {
						this.dataList = record || []
						this.total = totalRecord || 0
					} else {
						this.loading = false
						this.$message({
							message: msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		search() {
			this.queryData.pageNum = 1
			this.pageNum = 1
			this.loadData()
		},
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		reset() {
			this.queryData = {
				pageNum: 1,
				pageSize: 100,
				paymentMerchantType: 2,
				merchantId:
					this.$store.getters.userInfo.merchantId === '0'
						? null
						: this.$store.getters.userInfo.merchantId,
				userType: 0
			}
			this.pageNum = 1
			this.loadData()
		},
		openEditDialog(row) {
			this.$refs.dialogFormRef && this.$refs.dialogFormRef.resetFields()
			this.formData = {
				...row
			}
			this.visibleDialog = true
		},
		handleSubmit() {
			this.$refs.dialogFormRef.validate((valid) => {
				if (valid) {
					const params = {
						scale: this.formData.scale,
						id: this.formData.id,
						status: this.formData.status
					}
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					})
					this.$api
						.updatePaymentChannelConfig(params)
						.then((res) => {
							if (res.code === 200) {
								this.$message.success(
									this.$t('common.modify_success')
								)
								this.loadData()
								this.visibleDialog = false
							}
							loading.close()
						})
						.catch(() => {
							loading.close()
						})
				}
			})
		},
		useChannel(row, val) {
			const params = {
				id: row.id,
				status: val || row.status
			}
			console.log('测试')
			this.$api.updatePaymentChannelConfig(params).then((res) => {
				if (res.code === 200) {
					this.$message.success(this.$t('common.modify_success'))
					this.loadData()
				}
			})
		},
		disableChannel(row) {
			const str = `<strong>${this.$t(
				'funds.deposit_and_withdraw_config.disable_channel_tip1'
			)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
				'funds.deposit_and_withdraw_config.disable_channel_tip2'
			)}</span>`
			this.$confirm(str, this.$t('common.success_tip'), {
				dangerouslyUseHTMLString: true,
				confirmButtonText: this.$t('common.confirm'),
				cancelButtonText: this.$t('common.cancel'),
				type: 'warning'
			})
				.then(() => {
					const params = {
						id: row.id,
						status: 0
					}
					this.$api.updatePaymentChannelConfig(params).then((res) => {
						if (res.code === 200) {
							this.$message.success(
								this.$t('common.modify_success')
							)
							this.loadData()
						}
					})
				})
				.catch(() => {})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}
.look {
	//background-color: #00BFBF;
	//border-color: #00BFBF;
	color: #00bfbf;
}
</style>
